<template>
  <!-- 登录 -->
  <div class="login">
    <div class="menu">
      <h3 class="title">{{ msg }}</h3>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input
            prefix-icon="iconfont el-icon-yonghu"
            v-model="ruleForm.username"
            placeholder="账号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            prefix-icon="iconfont el-icon-tianchongxing-"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            class="codeId"
            v-model.number="ruleForm.code"
            placeholder="验证码"
            prefix-icon="iconfont el-icon-yanzhengma"
          ></el-input>
          <div class="imgSrc" @click="getCode">
            <img :src="isImgShow" alt="">
          </div>
        </el-form-item>
        <el-checkbox v-model="checked">记住我</el-checkbox>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm"
            style="width: 100%; margin-top: 30px"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getCode, getLogin } from '@/api/login'
import { getALLlist } from '@/api/menus'
import { encrypt } from '@/utils/rsaEncrypt'
export default {
  name: 'Login',
  components: {},
  data () {
    return {
      msg: '后台管理系统',
      ruleForm: {
        username: '', // 用户名
        password: '', // 密码
        code: '', // 验证码
        uuid: null
      },
      isImgShow: '', // 图片地址
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      },
      checked: false
    }
  },
  computed: {},
  watch: {},
  mounted () {
    this.getCode()
  },
  methods: {
    // try catch 捕获 async await异常
    // async-> 在函数前边 await在promise 前边
    // 作用：将异步变成同步
    async getCode () {
      const { img, uuid } = await getCode()
      this.isImgShow = img
      this.ruleForm.uuid = uuid
    },
    submitForm () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          // 登录
          const params = JSON.parse(JSON.stringify(this.ruleForm))
          // 密码加密
          params.password = encrypt(this.ruleForm.password)
          // console.log(params.password)
          const { token, user } = await getLogin(params)
          console.log(user.roles)
          const roles = JSON.stringify(user.roles)
          // const roles = user
          // key:userId  value:res.token }
          // 存token
          this.$cookies.set('SCDQ-TOEKN', token)
          // 存按钮权限
          localStorage.setItem('roles', roles)
          // 存路由权限
          const menus = await getALLlist()
          localStorage.setItem('menus', JSON.stringify(menus))
          this.$router.push('/')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.login {
  background-image: url('http://sys.landuoduo.top/static/img/background.9b952c4a.jpg');
  background-size: cover;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.menu {
  width: 350px;
  background-color: $background-color;
  padding: 25px 25px 5px 25px;
}
.title {
  margin: 0 auto 30px auto;
  text-align: center;
  color: #707070;
}
.demo-ruleForm {
  padding: 0;
}
.demo-ruleForm ::v-deep .el-form-item__content {
  margin: 0 !important;
}
.codeId{
  width: 55%;
}
.imgSrc{
  float: right;
}
</style>
